<template>
  <div id="list">
    
    <div class="item" v-for="(item,index) in listData">
      <span class="item-icon">
        <i class="iconfont" :class="item.icon" :style="{color: item.iconColor}"></i>
      </span>
      <div class="item-info">{{item.info}}</div>
    </div>
   
  </div>
</template>

<script>
  export default {
    props: {
      listData: {
        type: Array,
        default(){
          return []
        }
      },
    },
  }
</script>

<style scoped>
  #list{
    background-color: #fff;
    margin-top: 13px;
  }
  .item{
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px #eee solid;
  }
  .item-info{
    padding-left: 10px;
  }
  .item-icon i{
    font-size: 20px;
  }
</style>
